import { Button, Card, Form, Input, Space, Tabs, TabsProps } from "antd";
import React, { useState } from "react";
import './login.scss'
import  axios from 'axios'
import API from "./../../api";


export default function Login() {

    type UserRole = "inspec" | "familyPartyRecord" | string;

    const [role, setRole] = useState<UserRole>("inspec");


    const items: TabsProps['items'] = [
        {
            key: "inspec",
            label: `监督检查系统`,
          },
          {
            key: "familyPartyRecord",
            label: `农村家宴系统`,
          },
      ];

      const login = async (values: any) => {
       const data = await API.login({...values,role});
       console.log(data);
       
    };

      
    return (
        <div className="login">
            <Space direction="vertical" size={16}>
                <Card style={{ width: 300 }}>
                    <h2 className="h2">千锋</h2>
                    <Form onFinish={login}>
                    <Tabs   centered={true}
                            onChange={setRole}
                            defaultActiveKey="inspec"
                            items={items} />
                        <Form.Item
                            label="登录名"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密  码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        {/* wrapperCol={{ offset: 8, span: 16 }} */}
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </Space>
        </div>

    );
}